<template>
	<view class="container">
		<top-back-navbar position="fixed" title="快捷支付短信签约" background="#7155F8" color="#000"></top-back-navbar>
		<view class="box">
			
			<view class="">
				<p>银行卡号</p> <input v-model="cardNo" class="uni-input" type="number" placeholder="请填写银行卡号" />
			</view>
			<view class="">
				<p>持卡人姓名</p> <input v-model="holderName" class="uni-input" type="" placeholder="请填写持卡人姓名" />
			</view>
			<view class="">
				<p>银行卡手机号</p> <input v-model="mobileNo" class="uni-input" type="number"
					placeholder="请填写银行卡预留手机号银行卡手机号" />
			</view>
			<view class="">
				<p>身份证号</p> <input v-model="identityCode" class="uni-input" type="" placeholder="请填写身份证号码" />
			</view>
			<view class="tilip">
				<p style="width: 100% ;">填写以上信息后 点击获取验证码按钮，输入验证码然后点击下方按钮即可完成签约!</p>
			</view>
			<view class="">
				<p>验证码</p> <input v-model="smsCode" class="uni-input" type="number" placeholder="请填写验证码" />
				<button @click="get_code()" :disabled="set_ajex" style="background-color: #775CF8;">{{settxt()}}</button>
			</view>
		</view>
		<view class="qianyue">
			<button @click="sure_qianyue()">立即签约</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openid: '',
				cardNo: '',
				holderName: '',
				mobileNo: '',
				identityCode: '',
				smsCode: '',
				set_ajex: false,
				sec: 60, // 倒计预设15秒

			};
		},
		onLoad: function() {

			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		mounted() {
			// this.countDownTimer()
		},
		methods: {
			get_code() {
				
				if (this.cardNo == '' || this.holderName == '' || this.mobileNo == '' || this.identityCode == '') {
					uni.showToast({
						title: '有值未填写!',
						icon: 'none',
						duration: 1500,
						position: 'center',
					})
				}
				else{
					var openid = this.openid
					this.set_ajex=true
					this.countDownTimer()
					uni.request({
						url: this.$BASE_URL +
							'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.xs_get_smsCode&app=1&openid=' +
							openid+'&cardNo='+ this.cardNo +'&holderName='+ this.holderName +'&mobileNo='+ this.mobileNo +'&identityCode='+ this.identityCode,
					
						success: res => {
							var data = res.data
							var code = data.error
							if(code == 0){
								uni.showToast({
									title: data.message,
									icon: 'none',
									duration: 1500,
									position:'center',
									
								})
								this.set_ajex=false
							}else if(code != 0){
								uni.showToast({
									title: data.message,
									icon: 'none',
									duration: 1500,
									position:'center',
								})
							}
						
						},
						fail: () => {},
						complete: () => {
							uni.hideLoading();
						}
					});
					
				}
				
			},
			countDownTimer() {
				if (this.sec > 0 && this.set_ajex==true) {
					setTimeout(() => {
						this.sec -= 1
						this.countDownTimer()
						
					}, 1000)
				}else{
					this.set_ajex=false
				}
			},
			settxt(){
				if(this.set_ajex){
					return `${this.sec}秒`
				}else{
					return "获取验证码"
				}
			},
			sure_qianyue(){
				var openid = this.openid
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.xs_signing&app=1&openid=' +
						openid+'&smsCode='+ this.smsCode ,
				
					success: res => {
						var data = res.data
						var code = data.error
						if(code == 0){
							uni.showToast({
								title: data.message,
								icon: 'none',
								duration: 1500,
								position:'center',
								success(){
									uni.navigateTo({
										url: '/pages/member/zfbPay/zfbPay'
									});
								}
							})
						}else if(code != 0){
							uni.showToast({
								title: data.message,
								icon: 'none',
								duration: 1500,
								position:'center',
							})
						}
					
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			}
		}

	}
</script>

<style lang="less">
	* {
		margin: 0;
		padding: 0;
	}

	page {
		background-size: 100% 100%;
		height: 100%;
		
	}


	.container {
		height: 100vh;
		width: 100vw;
		background-color: #fff;
		padding: 0 10px;
		position: relative;
		padding: 15px;
		background-color: #F5F3F3;
	}

	.box {
		width: 100%;
		background-color: #fff;
		padding: 10px 15px;
		border-radius: 15px;
		box-shadow: 0 0 16px 0 #cccccc;
		.tilip {
			p {
				font-size: 12px;
				color: red;
			}
		}

		view {
			display: flex;
			border-bottom: 1px solid #f5f5f5;
			align-items: center;
			width: 100%;
			margin-top: 10px;

			p {
				width: 25%;
			}

			button {
				background-color: #55BC6E;
				border: none;
				color: #fff;
				width: 25%;
				height: 30px;
				font-size: 12px;
				line-height: 30px;
			}

			input {
				width: 50%;
			}
		}
	}

	.qianyue {
		width: 100%;
	
		padding: 0 15px;
		margin-top: 40px;
	

		button {
			width: 90%;
			height: 40px;
			font-size: 20px;
			background-color: #775CF8;
			color: #fff;
			line-height: 40px;
			margin: 0 auto;
			border-radius: 50px;
		}
	}
</style>